<template>
	<uni-popup class="uni-popup" type="center" ref="ref_popup" background-color="#fff">
		<view class="content">
			<view class="title">
				<view class="left"></view>
				<view class="center">
					{{ my_rate ? '您已经评过分了~' : '评分' }}
				</view>
				<view class="box-close">
					<uni-icons
						class="deep-color"
						type="closeempty"
						@click="close_popup"
					></uni-icons>
				</view>
			</view>
			<view class="box-rate">
				<!-- 选择半星  -->
				<uni-rate
					:readonly="Boolean(my_rate)"
					v-model="temp_rate"
					@change="rate_change"
					allow-half
				/>
				<text>{{ temp_rate }}分</text>
			</view>
			<!--   -->
			<button
				:disabled="Boolean(my_rate) || bt_disabled"
				class="bt_sure_rate"
				@click="sure_rate"
			>
				确认评分
			</button>
		</view>
	</uni-popup>
</template>

<script setup>
import { computed, ref } from 'vue'

const ref_popup = ref()

const bt_disabled = ref(true)
const temp_rate = ref(3)
const my_rate = ref(0)

const open_popup = function () {
	// 思路就是：评分绑定的是一个临时的分数，当确认评分的时候才会赋值给我的评分数
	// 当我的评分数的时候，显示我的评分数，并且不能再次评分。没有我的评分就默认显示3分
	temp_rate.value = my_rate.value ? my_rate.value : 3
	ref_popup.value.open()
}

const close_popup = function () {
	ref_popup.value.close()
	bt_disabled.value = true
}

const sure_rate = function () {
	my_rate.value = temp_rate.value
	close_popup()
}

const rate_change = function () {
	bt_disabled.value = false
}

defineExpose({
	open_popup
})
</script>

<style scoped lang="scss">
.uni-popup {
	.content {
		font-size: 32rpx;
		width: 480rpx;
		padding: 10rpx 0 40rpx 0;
		// border-radius: 20rpx;
		// overflow: hidden;

		.title {
			font-size: 32rpx;
			margin: 20rpx 40rpx;
			@extend .f-c-c;
			justify-content: space-between;
			color: #888;
		}

		.box-rate {
			// font-size: 32rpx;

			@extend .f-c-c-n;
			margin: 40rpx 0;
			text {
				color: #ffca3e;
				margin-left: 30rpx;
			}
		}

		.bt_sure_rate {
			font-size: 32rpx;
			width: 200rpx;
			padding: 0;
		}
	}

	::v-deep .uni-popup__wrapper {
		border-radius: 30rpx;
	}
	::v-deep .uni-icons.uniui-star-filled {
		font-size: 50rpx !important;
	}
}
</style>
